<template>
  <music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
</template>

<script>
import { mapGetters } from 'vuex'
import axios from 'axios'
import { createSong } from 'common/song.js'
// 导入组件
import MusicList from 'components/music-list/music-list'

export default {
  components: { MusicList },
  name: 'SingerDetail',
  data() {
    return {
      songs: []
    }
  },
  computed: {
    ...mapGetters(['singer']),
    title() {
      return this.singer.name
    },
    bgImage() {
      return this.singer.avatar
    }
  },
  created() {
    this._getDetail()
    // console.log(this.singer)
  },
  methods: {
    // 获取具体歌手单曲数据
    _getDetail() {
      // 如果没这歌手的id就return
      if (!this.singer.id) {
        this.$router.push('/singer')
        return
      }
      axios
        .get('api/artists', {
          params: {
            id: this.singer.id
          }
        })
        .then(res => {
          if (res.status === 200) {
            // console.log(res.data)
            // 更新歌手的歌曲数据
            let ret = []
            res.data.hotSongs.forEach(item => {
              ret.push(createSong(item))
            })
            this.songs = ret
          }
        })
    }
  }
}
</script>

<style lang="stylus" scoped></style>
